  <template>
    <div>
      <el-form style="width:600px" ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

          <el-form-item label="商品价格" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>

            <el-form-item label="商品库存" prop="store">
              <el-input v-model="form.store"></el-input>
            </el-form-item>

        <el-form-item label="所属分类" prop="cateId">
          <el-select v-model="form.cateId" placeholder="请输入商品">
            <el-option v-for="form in cates" :label="form.name" :value="form.id" :key="form.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>


        <el-form-item label="上下架" prop="onOff">
          <el-form-item label="商品详情" style="width: 800px" >
            <quill-editor v-model="form.conte"
                          ref="myQuillEditor"
                          :options="editorOption"
                         >
            </quill-editor>
          </el-form-item>
          <el-switch v-model="form.onOff"></el-switch>
          <el-form-item label="图片分类">
            <el-upload
              class="upload-demo"
              ref="douplod"
              action="/api/upload"
              name="file"
              :on-success="uplodSuccess"
              :before-remove="beforeUplod"
              :auto-upload="false">
              <div class="uplode">
                <i class="el-icon-upload"></i>
              </div>
              <el-button size="small">选取文件(图片不能超过1m)</el-button>
            </el-upload>
            <el-button class="box2" @click="douplod">上传</el-button>
            <div class="box4">
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </div>
          </el-form-item>
        </el-form-item>



      </el-form>
    </div>
  </template>

  <script>
    import {getList,fromadd}from '@/api'
  import { Message } from 'element-ui';

  export default {
    name: 'Increase',
    data(){
      // //自定义验证规则
      // const namecheckAge = (rule, value, callback) => {
      //   if (value!=='小米'){
      //     callback(new Error('不是小米'))
      //   }else {
      //     //验证通过放行
      //     callback()
      //   }
      // }
      // //自定义验证规则

      return {
        form: {
          name: '',//商品名
          onOff: false,//上下价
          price:'',//价格
          store:'',//库存
          cateId:-1,//当前所属分类
          desc:'',//描述
          thumb:'',//分辨图片

        },
        cates:[],//新增商品所属分类
        editorOption:{
          //富文本的配置项
        },
        //表单验证
        rules:{
          name:[
            { required: true, message: '请输入类型', trigger: 'blur' },
            // {patten:/\w{3,5}/,message:'必须三到五位的数字',trigger: 'blur' },//正则验证规则
            // {validator:namecheckAge, trigger: 'blur' }//自定义验证规则
          ],
          price:[
            { required: true, message: '请输入价格', trigger: 'blur' },
          ],
          store:[
            { required: true, message: '请输入库存', trigger: 'blur' },
          ],

        }
      }
    },
    created () {
      this.getList()
    },

    methods: {
      getList(){
        getList().then(res=>{
          if (res.data.code===200){
            this.cates=res.data.data.lists
          }
        })
      },
      beforeUplod(file){
        // 请求发送之前限制发送大小
        if (file.size>(1024*1024)){
          this.$alert('您不能大于1m', {
              confirmButtonText: '确定',
              callback: () => {
                this.$message({
                  type: 'error',
                  message: '上传失败'
                });
                return false
              }
            }
          );

        }else {
          return true
        }
      },
      uplodSuccess(res){
        // 提交后拿到的函数
        if(res.code===200){
          console.log(res)
          Message({
            message:res.msg,
            type:'success',
          })
          this.form.thumb=res.data.url
        }
      },
      douplod(){
        //点击按钮上传文件
        this.$refs.douplod.submit();
      },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid){
            fromadd(this.form).then(res=>{
              if (res.data.code===200){
                //上传成功
                Message({
                  message:'上传成功',
                  type:'success',
                  onClose:()=>{
                    // 商品新增成功
                    // 直接刷新
                    this.$router.go(0)
                  }
                })
              }else {
                Message({
                  message:res.msg,
                  type:'error',
                })
              }
            })


          } else {
            return false
          }
        });
      }
    },
  }
  </script>

  <style scoped lang="scss">
  .uplode{
    width: 300px;
    height: 120px;
    border: 1px solid #6666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    i{
      font-size: 50px;
    }

  }
  .el-upload-list__item-name{
    position: relative;
    top: 20px;
  }
  .box2{
    margin-left: 84px;
    margin-top: 20px;
  }
  .box4{
    margin-left: 54px;
    margin-top: 20px;
  }
::v-deep .ql-container{
  height: 500px;
}
  </style>
